<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript" src="./jquery.ete.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//1. E.T. call - template is not cached yet...
				var templ = $('script#template').ete({
					callback: function(sel, template){
						return($('#firstTarget').replaceWith(template));                            
					}, 
					data: {
						caption: '1. Space-Taxi Timetable (1.1.1982):',
						th: ['Space-Taxi','Neptun','Uranus','Saturn','Jupiter','Earth'],
						table: [
							['Alan',6,'','','',22],
							['Ida',12,15,'17:30',18,20],
							['Enterprise',8,'9:30','10:30',11,12],
							['Clingonian spaceship',16,'17:30','',19,null]
						]
					}
				});
				
				//2. E.T. call - load template from cache and feed with different data...
				$('script#template').ete({
					callback: function(sel, template){ $('#secondTarget').append(template); }, 
					data: {
						caption:'2. Space-Taxi Timetable (2.1.1982):',
						th: ['Space-Taxi','Neptun','Uranus','Saturn','Jupiter','Earth'],
						table: [
							['Alan',3,'','','',19],
							['Ida',12,15,'17:30',18,20],
							['Enterprise',8,'9:30','10:30',11,12]
						]
					}
				});
				
				//3. E.T. call - do not cache compiled template...
				$('#thirdTarget').ete({
					cache: false,
					data: {
						colorOdd: 'red',
						colorEven: 'green',
						caption: '3. Space-Taxi Timetable (3.1.1982):',
						th: ['Space-Taxi','Neptun','Uranus','Saturn','Jupiter','Earth'],
						table: [
							['Alan',6,'','','',22],
							['Ida',12,15,'17:30',18,20],
							['Enterprise',8,'9:30','10:30',11,12],
							['Clingonian spaceship',16,'17:30','',19,null]
						]
					}
				});
			});
		</script>
	</head>

	<body style="background:url(./et.jpg);background-attachment:fixed;background-repeat: no-repeat;">
		<script type="application/ete" id="template">
			<h2> 
				<%= data['caption']; %>
			</h2>
			<div>
				<table>
					<thead>
						<tr>
							<th>#</th>
							<% for(var i = 0; i < data['th'].length; ++i){ %>
								<th><b><%= data['th'][i] %></b></th>
							<% } %>
						</tr>
					</thead>
					<tbody>
						<%# Any kind of embedded javascript is possible... %>
						<% for(var i = 0; i < data['table'].length; ++i){ %>
							<tr>
								<td><%= (i+1); %></td>
								<% for(var j = 0; j < data['table'][i].length; ++j){ %>
									<td>
										<% if(data['table'][i][j] && data['table'][i][j] != ''){
											<%= data['table'][i][j]; %>
										<% }else{ %>
											<b>Stop on request</b>
										<% } %>
									</td>
								<% } %>
							</tr>
						<% } %>
					</tbody>
				</table>
			</div>
		</script>

		<p id="firstTarget"></p>

		<p id="secondTarget"></p>

		<script type="application/ete" id="thirdTarget">
			<div>
				<h2><%= data['caption']; %></h2>
				<div>
					<table>
						<thead>
							<tr>
								<th>#</th>
								<% for(var i = 0; i < data['th'].length; ++i){ %>
									<th><b><%= data['th'][i] %></b></th>
								<% } %>
							</tr>
						</thead>
						<tbody>
							<% for(var i = 0; i < data['table'].length; ++i){ %>
								<% if((i+1) % 2 == 0){ //Red color for every 2nd line...%>
									<tr style="color:#%= data.colorEven; %#">
										<td> <%= (i+1); %></td>
										<% for(var j = 0; j < data['table'][i].length; ++j){ %>
										<td>
											<% if(data['table'][i][j] && data['table'][i][j] != ''){
												template += data['table'][i][j];
											}else{ %>
												<b>Stop on request</b>
											<% } %>
										</td>
										<% } %>
									</tr>
								<%}else{  %>
									<tr style="color:#%= data.colorOdd; %#">
										<td><%= (i+1); %></td>
										<% for(var j = 0; j < data['table'][i].length; ++j){ %>
										<td>
											<% if(data['table'][i][j] && data['table'][i][j] != ''){
												template += data['table'][i][j];
											}else{ %>
												<b>Stop on request</b>
											<% } %>
										</td>
										<% } %>
									</tr>
								<% } %>
							<% } %>
						</tbody>
					</table>
				</div>
			</div>
		</script>
	</body>
</html>
